{% extends 'core/base.html' %}
{% block content %}
<div class="article-detail-container">
    <div class="article-header">
        <h2>{{ article.title }}</h2>

        <div class="article-meta">
            <div class="meta-item category">
                <span class="meta-label">分类：</span>
                <span class="meta-value">{{ article.category }}</span>
            </div>
            <div class="meta-item author">
                <span class="meta-label">作者：</span>
                <span class="meta-value">{{ article.author }}</span>
            </div>
            <div class="meta-item date">
                <span class="meta-label">发布时间：</span>
                <span class="meta-value">{{ article.created_at|date:"Y-m-d H:i" }}</span>
            </div>
        </div>
    </div>

    {% if article.image %}
        <div class="article-image">
            <img src="{{ article.image.url }}" alt="{{ article.title }}">
        </div>
    {% endif %}

    <div class="article-content">
        {{ article.content|linebreaks }}
    </div>

    <div class="article-actions">
        <a href="{% url 'article_list' %}" class="btn">
            <span class="back-icon">←</span> 返回文章列表
        </a>
    </div>
</div>

<style>
    .article-detail-container {
        max-width: 800px;
        margin: 0 auto;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .article-header {
        padding: 2rem 2rem 1rem;
    }

    .article-header h2 {
        margin-top: 0;
        color: var(--primary-dark);
        border-bottom: none;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin: 1.5rem 0;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .meta-item {
        display: flex;
        align-items: center;
    }

    .meta-label {
        color: var(--text-light);
        margin-right: 5px;
    }

    .meta-value {
        font-weight: 500;
    }

    .article-image {
        width: 100%;
        max-height: 500px;
        overflow: hidden;
    }

    .article-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .article-content {
        padding: 2rem;
        line-height: 1.8;
    }

    .article-content p {
        margin-bottom: 1.5rem;
    }

    .article-actions {
        padding: 1rem 2rem 2rem;
        display: flex;
        justify-content: center;
    }

    .back-icon {
        margin-right: 8px;
    }

    @media (max-width: 768px) {
        .article-header,
        .article-content,
        .article-actions {
            padding: 1.5rem;
        }

        .article-meta {
            flex-direction: column;
            gap: 10px;
        }
    }
</style>
{% endblock %}